import React from 'react'
import 'antd/dist/antd.css'
import { Typography } from 'antd'
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import useTodoState from './useTodoState';
import './style.css';

const App = () => {
  const {todos, addTodo, deleteTodo} = useTodoState(['学习hook','学习svg.js'])
  return (
    <div className="App">
      <Typography component="h1" style={{width:'100%'}}>
        TodoList
      </Typography>
      <TodoForm
        saveTodo={todoText => {
          const trimmedText = todoText.toString();
          if (trimmedText.length > 0) {
            addTodo(trimmedText);
          }
        }}

      />
      <TodoList todos={todos} deleteTodo={deleteTodo}  />
    </div>
  )

}

export default App
